﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=1">
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">
    <title>test</title>
    <link href="css/flexible.css" rel="stylesheet">
    <link href="css/bootstrap.css"/>
    <link href="css/bootstrap-theme.css"/>
</head>
<body>
    Vue实例-响应式系统
    <div id="app-1">
        <code>
            var data = {txt:'abc'};<br/>
            var app1 = new Vue({el:'#app-1',data:data});<br/>
            app1.txt==data.txt  ==>true
            <br/>
            过一秒过咱们改变data的值，会发现app1里的txt值也改变了。<br/>
            值得注意的是只有app里的data的属性才是响应式的。
            {{txt}}
        </code>
    </div>
    <br/>
    Vue实例自己的实例属性和方法用$来访问
    <div id="app-2">

    </div>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/flexible.js"></script>
<script src="js/vue-2.5.16.js"></script>

<script>
    var obj = {txt:'abc'};
    var app1 = new Vue({
        el:'#app-1',
        data:obj
    });

    console.log(app1.txt==obj.txt);
    console.log(app1.txt);//abc
    console.log(obj.txt);//abc
    var timeOut = setTimeout(function(){
        obj.txt = 'bcd';
        console.log(app1.txt);//bcd
        console.log(obj.txt);//bcd
    },2000);

    //例子2
    var data1 = {a:1};
    var app2 = new Vue({
        el:'#app-2',
        data:data1
    });
    console.log(app2.$data==data1);
    console.log(app2.$el==document.getElementById('app-2'));
    app2.$watch('a',function(newVal,oldVal){
        console.log('这个回调将在app2.a改变后调用');
    });

</script>

</body>
</html>